<template>
  <div class="theme-switch">
    <a-dropdown placement="bottomRight">
      <a-button type="text" class="theme-btn">
        <template #icon>
          <span class="theme-icon" v-if="themeStore.currentTheme === 'light'"
            ><BulbOutlined
          /></span>
          <span class="theme-icon" v-else-if="themeStore.currentTheme === 'dark'"
            ><BulbFilled style="color: #177ddc"
          /></span>
          <span class="theme-icon" v-else
            ><BgColorsOutlined style="color: var(--primary-color)"
          /></span>
        </template>
      </a-button>
      <template #overlay>
        <a-menu class="theme-menu">
          <a-menu-item
            v-for="theme in themeStore.themeOptions"
            :key="theme.key"
            @click="() => selectTheme(theme.key)"
          >
            <div class="theme-menu-item">
              <div class="color-block" :style="{ backgroundColor: theme.color }"></div>
              <span>{{ theme.name }}</span>
            </div>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { BulbOutlined, BulbFilled, BgColorsOutlined } from '@ant-design/icons-vue'
import { useThemeStore } from '@/stores/useThemeStore'

const themeStore = useThemeStore()

// 确保组件加载时初始化主题
onMounted(() => {
  themeStore.initTheme()
})

// 选择主题
const selectTheme = (themeKey: string) => {
  themeStore.setTheme(themeKey)
}
</script>

<style scoped>
.theme-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.theme-btn {
  background-color: var(--secondary-bg-color);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.theme-btn:hover {
  background-color: var(--hover-color);
  transform: scale(1.1);
}

.theme-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-menu {
  background-color: var(--primary-bg-color) !important;
  padding: 4px 0;
  border-radius: 4px;
  box-shadow: var(--box-shadow);
  min-width: 120px;
}

.theme-menu-item {
  display: flex;
  align-items: center;
  padding: 5px 8px;
}

.color-block {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-right: 8px;
  border: 1px solid var(--border-color);
}

:deep(.ant-dropdown-menu-item) {
  padding: 4px 8px;
  background-color: var(--primary-bg-color) !important;
}

:deep(.ant-dropdown-menu-item:hover) {
  background-color: var(--hover-color) !important;
}
</style>
